import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd'
import { useEffectOnce } from '@/utils/hooks'
import { showBgAnimation } from '@/utils/index'
import './index.scss'

const Home = () => {
  const navigate = useNavigate()

  useEffectOnce(() => {
    showBgAnimation('Home-Animation')
  }, [])

  const onclickJoin = (role) => {
    navigate(`/join-room/${ role }`)
  }

  return (
    <div className="home">
      <div
        className="animation"
        id="Home-Animation"
      />
      <img
        alt="logo加载失败"
        className="logo"
        src="https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/%E5%9B%BE%E6%A0%87/logo.png"
      />
      <h1>P2P共享影院</h1>
      <div className="desc">
			你可以选择本地视频或者网络视频直接与对方共享，这些内容不会经过服务器。
      </div>
      <Button
        className="btn"
        onClick={() => onclickJoin('Host')}
        type="primary"
      >
          创建房间
      </Button>
      <Button
        className="btn"
        onClick={() => onclickJoin('Audience')}
      >
        加入房间
      </Button>

      <div className="hint">
			自由创建 无需注册
      </div>
    </div>
  )
}

export default Home
